﻿@namespace Code.MarkDown

@inject HelperJsInterop HelperJsInterop

<div style="width:100%;height:100%;">
    <MonacoEdit ValueChanged="(v) => Value = v" Width="50%" @ref="monacoEdit" Style="float: left;" Path="@Path">
    </MonacoEdit>
    <div style="width: 50%;float: left;overflow: auto;max-height: 90vh;">
            <MMarkdownIt Scope="desc" Source="@Html" Class="markdown-parser__highlight"/>
    </div>
</div>


<style>
    .markdown-parser__highlight pre {
      overflow: auto;
      background-color: #f0f3f9 !important;
      color: #000000;
      border-radius: 4px;
      padding: 8px;
    }
    
    .markdown-parser__highlight code {
      background-color: unset !important;
    }
    code {
        margin: 0;
        font-size: 85%;
        padding: 0.5em;
        border-radius: 5px;
        display: block;
        overflow: auto;
        white-space: pre;
        font-family: mononoki,Consolas,"Liberation Mono",Menlo,Courier,monospace,"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji","Segoe UI Symbol","Android Emoji","EmojiSymbols";
        background-size: 20px 20px;
        background-image: url();
        word-break: initial;
        word-wrap: normal;
    }
    .markdown-parser__highlight p {
      margin-bottom: 0;
    }
    table {
        font-family: verdana,arial,sans-serif;
        font-size:11px;
        color:#333333;
        border-width: 1px;
        border-color: #999999;
        border-collapse: collapse;
    }
    table th {
        background:#b5cfd2;
        border-width: 1px;
        padding: 8px;
        border-style: solid;
        border-color: #999999;
    }
    table td {
        background:#dcddc0;
        border-width: 1px;
        padding: 8px;
        border-style: solid;
        border-color: #999999;
    }
</style>